<template>
  <view class="page-container">
    <swiper
      class="truck-pictures"
      indicator-active-color="#fff"
      circular
      indicator-dots
    >
      <swiper-item v-for="picture in truchInfo.pictureList" :key="picture.id">
        <image class="picture" mode="aspectFill" :src="picture.url"></image>
      </swiper-item>
    </swiper>
    <view class="truck-meta">
      <uni-list :border="false">
        <uni-list-item
          :border="false"
          title="车辆编号"
          :right-text="truchInfo.id"
        />
        <uni-list-item
          :border="false"
          title="车辆号牌"
          :right-text="truchInfo.licensePlate"
        />
        <uni-list-item
          :border="false"
          title="车型"
          :right-text="truchInfo.truckType"
        />
        <uni-list-item
          :border="false"
          title="所属机构"
          :right-text="truchInfo.currentOrganName"
        />
        <uni-list-item
          :border="false"
          title="载重"
          :right-text="truchInfo.allowableLoad"
        />
      </uni-list>
    </view>
  </view>
</template>
<script>
import { getTruckInfoApi } from '@/utils/my.js'
export default {
  data () {
    return {
      truchInfo: {},
    }
  },
  onLoad () {
    this.getTruckInfo()
  },
  methods: {
    async getTruckInfo () {
      const { code, data } = await getTruckInfoApi()
      this.truchInfo = data
      console.log(this.truchInfo)
    },
  },
}
</script>
<style lang="scss" scoped>
.page-container {
  padding: 30rpx;
}

.truck-pictures {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .picture {
    width: 100%;
    height: 100%;
  }
}

.truck-meta {
  border-radius: 16rpx;
  overflow: hidden;
  padding: 10rpx;
  margin-top: 20rpx;
  background-color: #fff;

  ::v-deep .uni-list-item__content-title {
    color: #818181 !important;
  }

  ::v-deep .uni-list-item__extra-text {
    color: #2a2929 !important;
  }
}
</style>
